<script setup>

import {ref} from "vue";
import config from "@/utils/GlobalConfig";
import {ElMessageBox} from "element-plus";
import router from "@/router";

let userName = ref(config.userName)
function loginOut(){
  ElMessageBox.confirm(
      '是否退出登录？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    config.isLogin = false
    config.userName = ''
    router.push('./')
  }).catch(()=>{})

}
</script>

<template>
  <div class = 'title-container'>
    <!--    标题-->
    <span class="title">
      基于 webgis 的赣州市景点一览系统
    </span>

    <span class="avatar" v-show="userName!==''">
      欢迎您，{{userName}}
      <el-button type="" style="padding-left: 5px" link @click="loginOut">退出登录</el-button>
    </span>
  </div>

</template>

<style scoped>
.title-container {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  background: #00daffeb;
  width: 100%;
  height: 60px;
}
.title{
  padding-left: 15px;
  font-size: 24px;
  line-height: 60px;
}

.avatar{
  float: right;
  padding-right: 30px;
  line-height: 60px;
}

</style>